<template>
  <div v-if="toolStore.isSearch" class="heightSearch" :style="single ? 'top: 74px' : 'top: 113px;'" @click.stop>
    <div class="search">
      <el-input v-model="lowHeight" clearable placeholder="最低高度"></el-input>
      <div class="line"></div>
      <el-input v-model="topHeight" clearable placeholder="最高高度"></el-input>
    </div>
    <el-button class="icon" @click.stop="search"></el-button>
  </div>
</template>

<script>
export default {
  name: "HeightSearch",
};
</script>
<script setup>
import { defineEmits, onBeforeUnmount, watch } from "vue";
import useToolTabStore from "@/store/modules/toolTab";

const toolStore = useToolTabStore();
const lowHeight = ref(null);
const topHeight = ref(null);
const emits = defineEmits(["heightSearch"]);
const props = defineProps({
  single: {
    type: Boolean,
    default: false
  }
})

const search = () => {
  emits("heightSearch", lowHeight.value, topHeight.value);
};

watch(
  () => toolStore.isSearch,
  (newV, oldV) => {
    if (!newV) {
      lowHeight.value = null;
      topHeight.value = null;
    }
  }
);
</script>

<style lang="scss">
.heightSearch {
  .el-input,
  .el-input__wrapper {
    width: 80px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: white;
  }

  .el-input__inner {
    color: white;
  }

  .el-button {
    border: none !important;
  }
}
</style>

<style scoped lang="scss">
.heightSearch {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  padding: 0 36px;
  top: 113px;
  right: 37px;
  width: 448px;
  height: 72px;
  background: url("/img/cockpit/searchHeight.png");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  z-index: 10;

  .search {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    width: 313px;
    height: 38px;
    border-radius: 2px;
    border: 1px solid #36eeff;
    box-shadow: inset 0 0 10px #36eeff;
    background-color: rgba(1, 10, 11, 0.9);

    .line {
      margin: 0 30px;
      width: 11px;
      height: 1.5px;
      background: #615f58;
    }
  }

  .icon {
    width: 38px;
    height: 38px;
    border-radius: 2px;
    border: 1px solid #36eeff;
    box-shadow: inset 0 0 10px #36eeff;
    background: url("/img/cockpit/searchBtn.png");
    background-color: rgba(1, 10, 11, 0.9);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    cursor: pointer;
  }
}
</style>
